<template>
    <el-dialog
        v-model="dialogVisible"
        class="workspace-operation-form"
        title="新增"
        width="600px"
        draggable
        @closed="closeDialog"
    >
        <el-form
            ref="workspaceFormRef"
            :model="roleForm"
            label-width="auto"
            :rules="rules"
            style="max-width: 600px"
            label-position="top"
        >
            <el-form-item label="角色名称" prop="name">
                <!-- 此处只允许输入英文字母 -->
                <el-input
                    v-model="roleForm.name"
                    placeholder="请输入英文或字母名称"
                    maxlength="20"
                    @input="roleForm.name = roleForm.name.replace(/[^a-zA-Z]/g, '')"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { restHelperInstance } from '@/composables/useGeoHelper'
// 表单ref
const workspaceFormRef = ref<FormInstance>()
const dialogVisible = ref(false)
interface IRoleForm {
    name: string
}
const emptyRoleTemplate: IRoleForm = {
    name: '',
}
const roleForm = ref<IRoleForm>(JSON.parse(JSON.stringify(emptyRoleTemplate)))
let orignRole = reactive<IRoleForm>({
    name: '',
})
const rules = reactive<FormRules<typeof emptyRoleTemplate>>({
    name: [{ required: true, trigger: 'blur' }],
})

// openDialog
const openDialog = () => {
    dialogVisible.value = true
}
const setOrignRole = (orignRoleParam: IRoleForm) => {
    orignRole = orignRoleParam
    const deepCloneData = JSON.parse(JSON.stringify(orignRoleParam))
    roleForm.value = deepCloneData
}
const closeDialog = () => {
    roleForm.value = JSON.parse(JSON.stringify(emptyRoleTemplate))
    dialogVisible.value = false
}
interface IEmit {
    (e: 'updateRoles'): void
}
const emit = defineEmits<IEmit>()
const addOrUpdate = () => {
    if (!workspaceFormRef.value) return
    workspaceFormRef.value.validate(valid => {
        if (valid) {
          restHelperInstance.addRole(roleForm.value.name)
                    .then(() => {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        closeDialog()
                        emit('updateRoles')
                    })
                    .catch(() => {
                        ElMessage({
                            type: 'error',
                            message: '添加失败!',
                        })
                    })
        }
    })
}

onBeforeMount(() => {
})

defineExpose({ openDialog, setOrignRole })
</script>
<style lang="scss">
.workspace-operation-form {
  .el-dialog__body{
    padding: 20px;
  }
  .el-dialog__footer {
    padding: 20px;
      text-align: center;
  }
}
</style>
